<template>
    <div
        class="page_root"
        :key="queryUpdateFlag"
        data-page-name="项目概览（二级）"
        data-page-identification="m_2bf16vzme6"
    >
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_eil7xzm6ak 自定义模板_yfivr9jk64 -->
            <div class="view-second">
                <div class="top-msg">
                    <div class="base-data">
                        <div class="base-data-title">
                            <div class="title">基本信息</div>
                            <a-space>
                                <div class="approve-status">
                                    <div class="label">审批状态:</div>
                                    <div class="value">{{ state.projectDetail?.approvalStatusDesc }}</div>
                                </div>
                                <a-button type="primary" @click="handleCopy" size="small" ghost>复制模板项目</a-button>
                            </a-space>
                        </div>
                        <div class="base-msg" :class="statusBoxClass">
                            <div class="msg-left">
                                <!-- 左侧图标 -->
                                <div class="left-icon"></div>

                                <!-- 中间部分 -->
                                <div class="middle-box" :class="statusBtnClass">{{
                                    state.projectDetail?.projectStatus
                                }}</div>

                                <!-- 右侧文本 -->
                                <div class="right-text">{{ state.projectDetail?.name }}</div>
                            </div>
                            <div class="msg-right">
                                <a-space :size="6">
                                    <div class="start-icon"></div>
                                    <div class="label">项目优先级:</div>
                                    <div class="value">{{ state.projectDetail?.projectPriority }}</div>
                                    <div class="file-icon"></div>
                                    <div class="label">项目模板:</div>
                                    <div class="value">{{ state.projectDetail?.projectTemplateName }}</div>
                                </a-space>
                            </div>
                        </div>
                        <div class="group-div">
                            <div class="people-title">团队成员</div>
                            <div class="role-content-detail">
                                <a-row :gutter="16">
                                    <a-col
                                        :span="8"
                                        v-for="(item, index) in state.projectDetail.projectExtendsRoleList"
                                        :key="index"
                                    >
                                        <div class="role-item">
                                            <div class="role-label">{{ item.role }}</div
                                            >：
                                            <!-- 给 role-value 加 title -->
                                            <div class="role-value" :title="item.userList?.join(',')">
                                                {{ item.userList?.join(',') }}
                                            </div>
                                        </div>
                                    </a-col>
                                </a-row>
                            </div>
                        </div>
                    </div>
                    <div class="risk-view">
                        <a-row :slots="'10:14'" class="vid_06yu6lwuf7">
                            <a-col :span="10">
                                <!-- begin vid_toxfkue4zy 容器_wiogt4a4g4 -->
                                <al-box class="vid_toxfkue4zy">
                                    <!-- begin vid_jl5ou7qz6s 简单文本_q9wmjwt2qx -->
                                    <span class="vid_jl5ou7qz6s"> 项目风险概览 </span>
                                    <!-- end vid_jl5ou7qz6s 简单文本_q9wmjwt2qx -->
                                </al-box>
                                <!-- end vid_toxfkue4zy 容器_wiogt4a4g4 -->
                            </a-col>
                            <a-col :span="14">
                                <!-- begin vid_2apjl6k1x3 容器_ih9gyb262w -->
                                <al-box class="vid_2apjl6k1x3">
                                    <!-- begin vid_up9eo3kmq0 活跃风险： -->
                                    <span class="vid_up9eo3kmq0"> 活跃风险： </span>
                                    <!-- end vid_up9eo3kmq0 活跃风险： -->
                                    <!-- begin vid_9xyyp3ju67 0 -->
                                    <span
                                        class="vid_9xyyp3ju67"
                                        :style="{ 'color': state.dailyRiskList.length < 3 ? '#262626FF' : '#F5222DFF' }"
                                    >
                                        {{ state.dailyRiskList.length }}
                                    </span>
                                    <!-- end vid_9xyyp3ju67 0 -->
                                    <!-- begin vid_nc3051idjd 个 -->
                                    <span class="vid_nc3051idjd"> 个 </span>
                                    <!-- end vid_nc3051idjd 个 -->
                                </al-box>
                                <!-- end vid_2apjl6k1x3 容器_ih9gyb262w -->
                            </a-col>
                        </a-row>
                        <div class="daily-risk-wrapper" style="height: 318px">
                            <a-carousel
                                arrows
                                dot-position="bottom"
                                :autoplaySpeed="10000"
                                style="height: 318px"
                                autoplay
                            >
                                <template #prevArrow>
                                    <div class="custom-slick-arrow" style="left: -20px; z-index: 1">
                                        <left-outlined />
                                    </div>
                                </template>
                                <template #nextArrow>
                                    <div class="custom-slick-arrow" style="right: -20px; z-index: 1">
                                        <right-outlined />
                                    </div>
                                </template>
                                <al-box
                                    v-for="(item, index) in state.dailyRiskList"
                                    direction="vertical"
                                    :key="index"
                                    style="width: 100%; height: 318px"
                                >
                                    <al-box class="submit" align="center">
                                        <div style="margin-right: 20px">
                                            <user-outlined style="margin-right: 4px" />
                                            <span
                                                >提交人：<b>{{ item.submitter }}</b></span
                                            >
                                        </div>
                                        <div>
                                            <calendar-outlined style="margin-right: 4px" />
                                            <span
                                                >提交时间：<b>{{ item.submissionTime }}</b></span
                                            >
                                        </div>
                                    </al-box>
                                    <al-box class="detail">
                                        <!-- 任务 -->
                                        <a-row>
                                            <a-col :span="item.riskTypeEnum === 'TASK' ? 12 : 24" class="item">
                                                <div class="title">风险来源</div>
                                                <div class="content">
                                                    {{ item.riskTypeEnum === 'TASK' ? '任务' : '项目' }}风险
                                                </div>
                                            </a-col>
                                            <a-col
                                                :span="11"
                                                :offset="1"
                                                class="item"
                                                v-if="item.riskTypeEnum === 'TASK'"
                                            >
                                                <div class="title">项目阶段</div>
                                                <div class="content" :title="item.milepostName || ''">
                                                    {{ item.milepostName || '' }}
                                                </div>
                                            </a-col>
                                            <a-col :span="12" class="item" v-if="item.riskTypeEnum === 'TASK'">
                                                <div class="title">任务名称</div>
                                                <div class="content" :title="item.taskName || ''">
                                                    {{ item.taskName || '' }}
                                                </div>
                                            </a-col>

                                            <a-col
                                                :span="item.riskTypeEnum === 'TASK' ? 11 : 24"
                                                :offset="item.riskTypeEnum === 'TASK' ? 1 : 0"
                                                class="item"
                                            >
                                                <div class="title">风险描述</div>
                                                <div class="content" :title="item.riskDescription || ''">
                                                    {{ item.riskDescription || '' }}
                                                </div>
                                            </a-col>
                                            <a-col :span="24" class="item">
                                                <div class="title">解决方案</div>
                                                <div class="content" :title="item.solution || ''">
                                                    {{ item.solution || '' }}
                                                </div>
                                            </a-col>
                                        </a-row>
                                    </al-box>
                                </al-box>
                            </a-carousel>
                        </div>
                    </div>
                </div>
                <div class="risk-table">
                    <div class="title">
                        <div class="title-font"> 当前延期任务列表 </div>
                        <div style="width: 200px">
                            <a-select
                                style="width: 100%"
                                :options="state.milepostData"
                                @focus="getStory"
                                placeholder="请输入或选择用户故事"
                                @change="getDelayTask"
                                allow-clear
                                v-model:value="state.riskFilter"
                                show-search
                                :filterOption="
                                    (input, option) => {
                                        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    }
                                "
                            />
                        </div>
                    </div>
                    <a-table
                        :columns="columns"
                        :data-source="state.delayTaskData"
                        bordered
                        class="table-box"
                        :loading="state.delayLoading"
                        :pagination="false"
                        @resizeColumn="handleResizeStoryColumn"
                    />
                </div>
            </div>
            <!-- end vid_eil7xzm6ak 自定义模板_yfivr9jk64 -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        },
        'useProjectId': {
            type: [String, Number],
            default: undefined
        },
        activeKey: String,
        refreshCount: Number
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    const state = reactive({
        projectDetail: {},
        // 项目风险
        dailyRiskList: [],
        delayTaskData: [],
        delayLoading: false,
        milepostData: [],
        riskFilter: undefined
    })
    const columns = ref([
        {
            title: '延期任务',
            dataIndex: 'taskName',
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: '所属用户故事',
            dataIndex: 'storyName',
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: '延期天数',
            dataIndex: 'delayDays',
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: '任务负责人',
            dataIndex: 'taskOwner',
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: '最新备注',
            dataIndex: 'description',
            align: 'center',
            ellipsis: true,
            resizable: true
        }
    ])
    function handleResizeStoryColumn(w, col) {
        col.width = w
    }
    // 获取用户故事
    function getStory() {
        post('/solution-ppm/api/v2/built-in-system-ppm/project/story/search', {
            projectId: props.useProjectId
        }).then(data => {
            state.milepostData = data.data.map(item => {
                return {
                    label: item.storyName,
                    value: item.id
                }
            })
        })
    }
    const getDelayTask = () => {
        state.delayLoading = true
        post(`/solution-ppm/api/v2/built-in-system-ppm/v3/platform_task/delay_task`, {
            projectId: props.useProjectId,
            storyId: state.riskFilter
        })
            .then(res => {
                state.delayTaskData = res.data
            })
            .finally(() => {
                state.delayLoading = false
            })
    }
    const getDailyRisk = () => {
        post(`/solution-ppm/api/v2/built-in-system-ppm/daily/queryRiskList`, {
            projectId: props.useProjectId
        }).then(res => {
            state.dailyRiskList = res
        })
    }
    const getData = async (additionParams = {}) => {
        const url = `/solution-ppm/api/v2/built-in-system-ppm/platform_product/product_project/${props.useProjectId}`
        return get(url)
            .then(async resp => {
                state.projectDetail = resp.data

                return resp
            })
            .catch(async e => {
                return Promise.reject(e)
            })
            .finally(async () => {})
    }
    watch(
        () => [props.useProjectId, props.activeKey, props.refreshCount],
        val => {
            getData()
            getDailyRisk()
            getDelayTask()
        },
        { immediate: true }
    )
    // 动态监听项目状态动态样式
    const statusMap = {
        '进行中': { btn: 'xmjxz-btn', box: 'xmjxz-box' },
        '未启动': { btn: 'xmwqd-btn', box: 'xmwqd-box' },
        '完成': { btn: 'xmwc-btn', box: 'xmwc-box' },
        '延期': { btn: 'xmyq-btn', box: 'xmyq-box' },
        '延期完成': { btn: 'xmyqwc-btn', box: 'xmyqwc-box' }
    }

    const statusBtnClass = computed(() => {
        const status = state.projectDetail.projectStatus
        return statusMap[status]?.btn || 'null-btn'
    })

    const statusBoxClass = computed(() => {
        const status = state.projectDetail.projectStatus
        return statusMap[status]?.box || 'null-box'
    })

    const emit = defineEmits(['copyProject'])
    function handleCopy() {
        emit('copyProject')
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }
    /*样式*/
    .view-second {
        padding: 4px;
        max-height: unset;
        height: calc(100vh - 210px);
        overflow: auto;
    }
    .top-msg {
        display: flex;
        height: 410px;
        gap: 16px;
        padding: 3px;
        margin-bottom: 16px;
    }
    .base-data,
    .risk-view {
        box-shadow: 0 0 10px #ebebeb;
    }
    .base-data {
        width: 70%;
        padding: 12px 20px;
        .base-data-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            .title {
                font-size: 16px;
                height: 16px;
                color: #262626;
                line-height: 16px;
                font-weight: 600;
                padding-left: 8px;
                border-left: 4px solid #3875ff;
            }
            .approve-status {
                display: flex;
                gap: 6px;
                font-size: 14px;
                .label {
                    color: #595959;
                }
                .value {
                    color: #3875ff;
                }
            }
        }
        .base-msg {
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: space-between;
            height: 40px;
            margin-bottom: 12px;
            /* 左侧图标固定大小，不挤压 */
            .msg-left {
                display: flex;
                align-items: center;
                gap: 8px;
                width: 60%;
                padding-left: 8px;
                .left-icon {
                    flex: 0 0 auto; /* 不伸缩 */
                    width: 16px;
                    height: 16px;
                    background-image: url('http://10.40.0.33:9001/file-storage/530877341241784320-source.png');
                    background-size: cover;
                }

                /* 中间固定部分，不挤压 */
                .middle-box {
                    flex: 0 0 auto;
                    margin-right: 8px;
                    white-space: nowrap;
                }

                /* 右侧文本，占满剩余空间，省略号 */
                .right-text {
                    flex: 1 1 auto; /* 可伸缩 */
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    color: #333;
                    font-size: 15px;
                    font-weight: 600;
                }
            }
            .msg-right {
                flex: 1;
                display: flex;
                justify-content: end;
                .start-icon,
                .file-icon {
                    height: 16px;
                    width: 16px;
                    background-image: url('http://10.40.0.33:9001/file-storage/530880998586791936-source.png');
                    background-size: cover;
                }
                .file-icon {
                    background-image: url('http://10.40.0.33:9001/file-storage/530881684212889600-source.png');
                }
                .label {
                    color: #595959;
                }
                .value {
                    color: #262626;
                }
            }
        }
        .group-div {
            padding-left: 12px;
            padding-top: 8px;
            background: linear-gradient(180deg, #f2f6fc, transparent);

            .people-title {
                font-weight: 600;
                color: #262626;
                font-size: 14px;
                margin-bottom: 8px;
            }

            .role-content-detail {
                width: 100%;
                height: 240px;
                overflow-y: auto;
                overflow-x: hidden;
                .role-item {
                    display: flex;
                    align-items: center;
                    height: 32px;

                    .role-label {
                        flex-shrink: 0; // 不允许被压缩
                        color: #595959;
                        margin-right: 4px;
                    }

                    .role-value {
                        flex: 1; // 占满剩余空间
                        min-width: 0; // 关键点：允许文本缩进裁切
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        color: #3875ff;
                        font-weight: 600;
                    }
                }
            }
        }
    }
    .risk-view {
        flex: 1;
        padding: 12px 20px;
        .title {
            font-size: 16px;
            height: 16px;
            line-height: 16px;
            font-weight: 600;
            padding-left: 8px;
            border-left: 4px solid #3875ff;
            margin-bottom: 12px;
        }

        .daily-risk-wrapper .submit {
            height: 40px;
            background-image: linear-gradient(270deg, #f1f3f6 100%, #f0f2f5 0%);
            background-image: url('http://10.40.0.33:9001/file-storage/421976148877647872.png');
            background-size: contain;
            padding-left: 12px;
            font-size: 14px;
            color: #595959;
            margin-right: 16px;
            margin-bottom: 16px;
        }

        .daily-risk-wrapper .submit b {
            font-size: 14px;
            color: #262626;
        }

        .daily-risk-wrapper .detail {
            background-image: linear-gradient(270deg, rgba(56, 117, 255, 0) 0%, rgba(56, 117, 255, 0.1) 100%);
            border-radius: 2px;
            border-left: 4px solid #3875ff;
            padding: 8px 14px;
            background-image: url('http://10.40.0.33:9001/file-storage/421450255266619392.png');
            background-size: contain;
        }

        .daily-risk-wrapper .detail .item {
            display: flex;
            flex-direction: column;
            margin-bottom: 16px;
        }

        .daily-risk-wrapper .detail .title {
            font-size: 14px;
            color: #262626;
            font-weight: 600;
            position: relative;
        }

        .daily-risk-wrapper .detail .title:before {
            position: absolute;
            left: 0;
            bottom: 0;
            content: '';
            width: 100px;
            height: 7px;
            background-image: linear-gradient(90deg, rgba(56, 117, 255, 0.4) 0%, rgba(56, 117, 255, 0) 100%);
        }

        .daily-risk-wrapper .detail .content {
            font-size: 14px;
            color: #595959;
            text-align: left;
            font-weight: 400;
            height: 44px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .daily-risk-wrapper {
            padding: 0 4px;
        }

        :deep(.@{ant-prefix}ant3-carousel .slick-list) {
            height: 300px;
        }

        :deep(.ant3-carousel .slick-dots li) {
            width: 8px;
            height: 8px;
            border-radius: 4px;
        }

        :deep(.@{ant-prefix}-carousel .slick-dots li.slick-active) {
            width: 16px;
        }

        :deep(.@{ant-prefix}-carousel .slick-slider) {
            width: 393px;
            height: 300px;
        }

        :deep(.@{ant-prefix}-carousel .slick-dots-bottom) {
            bottom: -22px !important;
            display: none !important;
        }

        .@{ant-prefix}-carousel :deep(.slick-arrow.custom-slick-arrow) {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            font-size: 16px;
            color: #3c78ff;
            background-color: #ebf1ff;
            opacity: 0.5;
            z-index: 1;
        }

        .@{ant-prefix}-carousel :deep(.custom-slick-arrow:before) {
            display: none;
        }

        .@{ant-prefix}-carousel :deep(.custom-slick-arrow:hover) {
            opacity: 1;
        }
    }
    /* 公共按钮样式 */
    .middle-box {
        border-radius: 2px;
        font-size: 12px;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
        padding: 0 6px;
        height: 20px;
        line-height: 20px;
        margin: 0 auto;
        display: inline-block;
    }

    /* 不同状态按钮 */
    .xmjxz-btn {
        border: 1px solid rgba(24, 194, 255, 1);
        color: #fff !important;
        background: #18c2ff;
    }
    .xmwc-btn {
        border: 1px solid rgba(82, 196, 26, 1);
        color: #fff !important;
        background: #52c41a;
    }
    .xmyq-btn {
        border: 1px solid rgba(245, 34, 45, 0.5);
        color: #fff;
        background: #f5222d;
    }
    .xmwqd-btn {
        border: 1px solid rgba(140, 140, 140, 1);
        color: #8c8c8c !important;
    }
    .xmyqwc-btn {
        border: 1px solid #ff9846;
        color: #fff;
        background: #ff9846;
    }

    /* 容器背景渐变 */
    .xmjxz-box {
        background-image: linear-gradient(to right, rgba(24, 194, 255, 0.2), #fff, #fff);
    }
    .xmwc-box {
        background-image: linear-gradient(to right, #edf9e8, #fff, #fff);
    }
    .xmyq-box {
        background-image: linear-gradient(to right, rgba(245, 34, 45, 0.1), #fff, #fff);
    }
    .xmwqd-box {
        background-image: linear-gradient(to right, #8c8c8c, #fff, #fff);
    }
    .xmyqwc-box {
        background-image: linear-gradient(to right, rgba(255, 152, 70, 0.1), #fff, #fff);
    }
    .null-box {
        background-image: linear-gradient(to right, #f2f6fc, #fff, #fff);
    }
    .null-btn {
        width: 0;
        min-width: 0;
    }
    .risk-table {
        padding: 12px 20px;
        margin: 3px;
        box-shadow: 0 0 10px #e5e5e5;
        .title {
            display: flex;
            justify-content: space-between;
        }
        .title-font {
            font-size: 16px;
            height: 16px;
            line-height: 16px;
            font-weight: 600;
            padding-left: 8px;
            border-left: 4px solid #3875ff;
            margin-bottom: 35px;
        }
    }
    .vid_06yu6lwuf7 {
        width: 100%;
        margin-bottom: 12px;
        border-style: none;
        border-color: #ffffff;
    }
    .vid_toxfkue4zy {
        display: flex;
        flex-direction: row;
    }

    .vid_jl5ou7qz6s {
        display: flex;
        flex-direction: row;
        padding-left: 8px;
        font-weight: 600;
        color: rgba(38, 38, 38, 1);
        font-size: 16px;
        line-height: 16px;
        border-left-style: solid;
        border-left-width: 4px;
        border-left-color: #3875ff;
    }

    .vid_2apjl6k1x3 {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        box-shadow: 0px 0px 0px 0px;
    }
    .table-box :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-weight: 400;
        color: #262626;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
        word-break: break-all;
    }
</style>
